<!-- components/SwiperStack.vue -->
<template>
	<view class="container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
		:style="{height:`${props.height}rpx`}">
		<view v-for="(item, index) in images" :key="item.id" class="card" :style="getCardStyle(index)">
			<image :src="item.image" class="card-image" mode="aspectFill" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue'

	const props = defineProps({
		list: {
			type: Array,
			required: true,
			default: () => [],
		},
		width: {
			type: Number,
			default: 460,
		},
		height: {
			type: Number,
			default: 580,
		}
	})

	const images = computed(() => props.list)

	const currentIndex = ref(0)
	let startX = 0
	let deltaX = 0

	const onTouchStart = (e) => {
		startX = e.touches[0].clientX
	}

	const onTouchMove = (e) => {
		deltaX = e.touches[0].clientX - startX
	}

	const onTouchEnd = () => {
		if (Math.abs(deltaX) > 50) {
			if (deltaX < 0) {
				next()
			} else {
				prev()
			}
		}
		deltaX = 0
	}

	const next = () => {
		currentIndex.value = (currentIndex.value + 1) % images.value.length
	}

	const prev = () => {
		currentIndex.value =
			(currentIndex.value - 1 + images.value.length) % images.value.length
	}

	const getCardStyle = (index) => {
		const total = images.value.length
		const offset = (index - currentIndex.value + total) % total
		const scale = 1 - offset * 0.08
		const translateX = offset * 90
		const z = total - offset
		return `
    transform: translateX(${translateX}rpx) scale(${scale});
    z-index: ${z};
    position: absolute;
    width: ${props.width}rpx;
    height: ${props.height}rpx;
    transition: all 0.3s ease;
    border-radius: 20rpx;
    overflow: hidden;
  `
	}
</script>

<style scoped>
	.container {
		position: relative;
		width: 100%;
		margin-top: 60rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		overflow: hidden;
		padding-left: 40rpx;
	}

	.card-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>